<template>
  <aside>
    <CardInfo />

    <Card title="通知公告" prefix-icon="tongzhi">
      <pre
        class="whitespace-pre-wrap break-words text-gray-800 dark:text-gray-100 text-base leading-relaxed"
      >
      {{ webInfo?.sidebarNotice }}
    </pre
      >
    </Card>
    <Card title="电子时钟" prefix-icon="Clock" size="38">
      <Clock />
    </Card>

    <Card title="每日鸡汤" prefix-icon="Shape" size="24">
      <div class="soup-container text-center text-gray-700 dark:text-gray-300 px-2">
        <i class="soup-quote-left text-2xl text-indigo-400 dark:text-indigo-300">“</i>
        <Transition name="fade" mode="out-in">
          <p class="soup-text text-base font-medium leading-relaxed tracking-wide" :key="soup">
            {{ soup }}
          </p>
        </Transition>
        <i class="soup-quote-right text-2xl text-indigo-400 dark:text-indigo-300">”</i>
      </div>
    </Card>

    <TagListCard />

    <Card title="网站资讯" prefix-icon="zixun" :isScale="true">
      <div class="space-y-2">
        <div class="flex items-center justify-between">
          <span class="text-sm">文章数目：</span>
          <span class="font-semibold text-indigo-600 dark:text-cyan-400 text-sm">
            {{ webInfo?.articleCount }}
          </span>
        </div>

        <div class="flex items-center justify-between">
          <span class="text-sm">运行时长：</span>
          <span class="font-semibold text-indigo-600 dark:text-cyan-400 text-sm">
            {{ differenceInDays }} 天
          </span>
        </div>

        <div class="flex items-center justify-between">
          <span class="text-sm">全站字数：</span>
          <span class="font-semibold text-indigo-600 dark:text-cyan-400 text-sm">
            {{ countWords(webInfo?.wordCount || 0) }}
          </span>
        </div>

        <div class="flex items-center justify-between">
          <span class="text-sm">访问次数：</span>
          <span class="font-semibold text-indigo-600 dark:text-cyan-400 text-sm">
            {{ webInfo?.visitCount }}
          </span>
        </div>

        <div class="flex items-center justify-between">
          <span class="text-sm">最后更新：</span>
          <span class="font-semibold text-indigo-600 dark:text-cyan-400 text-sm">
            {{ webInfo?.lastUpdateTime }} 前
          </span>
        </div>
      </div>
    </Card>
  </aside>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getSoup } from '@/apis/thirdParty/index'
import { useInitWebsiteInfo } from '@/composables/useInitWebsiteInfo'
const { webInfo, loading } = useInitWebsiteInfo()

const differenceInDays = ref(0)
getDifferenceInDays()

// 计算天数方法
function getDifferenceInDays() {
  // 计算运行时长
  // 假设 startTime 是一个表示开始时间的 Date 对象
  let startTime = new Date(webInfo.value?.startTime ?? '2025-05-30') // 替换为你实际的开始时间
  // 获取当前时间
  let now = new Date()
  // 计算两个日期之间的差值（以毫秒为单位）
  let differenceInMs = now.getTime() - startTime.getTime()
  // 转换为天数（向下取整，不考虑小时、分钟和秒）
  differenceInDays.value = Math.floor(differenceInMs / (1000 * 60 * 60 * 24))
}
function countWords(count: number) {
  if (count <= 1000) {
    return count
  } else {
    let counts = count / 1000
    // 留小数点一位数
    counts = Number(counts.toFixed(1))
    return counts + 'k'
  }
}
const soup = ref('这是每日鸡汤的示例句子。')

function soupSub() {
  getSoup()
    .then((res: any) => {
      soup.value = res.hitokoto
    })
    .catch(() => {
      soup.value = '今日鸡汤获取失败，请稍后再试。'
    })
}

onMounted(async () => {
  soupSub()
  // 获取网站信息，若为空则自动请求，且会缓存1小时
  if (loading) getDifferenceInDays()
})
</script>
<style scoped>
.soup-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.soup-quote-left,
.soup-quote-right {
  font-style: normal;
  font-weight: bold;
  font-family: Georgia, serif;
}

.soup-quote-left {
  align-self: flex-start;
  margin-bottom: 0.25rem;
}

.soup-quote-right {
  align-self: flex-end;
  margin-top: 0.25rem;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
